<!-- index首页 -->
<template>
  <div class="homeIndex">
    <header class="header">
      <p class="title">首页</p>
    </header>
    <div class="main_top">
      <el-radio-group v-model="selectKey" size="large" @change="changeTable">
        <el-radio-button label="sale_">销量</el-radio-button>
        <el-radio-button label="_money">销售额</el-radio-button>
      </el-radio-group>
      <el-select
        v-model="selectDay"
        class="m-2"
        placeholder="Select"
        size="large"
        @change="changeTable"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div id="main"></div>
    <p class="mapTitle">全国销量分布图</p>
    <div id="main1" style="height: 700px"></div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { GetAdminDataApi } from '../../request/api';
import chinaJSON from '../../data/china.json';
let selectKey = ref('sale_');
let selectDay = ref('today');
const options = [
  { label: '昨天', value: 'yesterday' },
  { label: '今天', value: 'today' },
  { label: '前三天', value: 'three_days' },
  { label: '前七天', value: 'seven_days' },
  { label: '前十四天', value: 'fourteen_days' },
];
let salePie: SalePieType = []; //后端返回的饼图数据
let myChart: echarts.ECharts; //实例化图标实例
function fetchData() {
  GetAdminDataApi().then((res) => {
    if (res.errno == 0) {
      salePie = res.data.salePie;
      let data = res.data.salePie.map((item) => ({
        value: item.sale_today,
        name: item.name,
      }));
      // 基于准备好的dom，初始化echarts实例
      myChart = echarts.init(document.getElementById('main') as HTMLElement);
      // 绘制图表
      setOptions(data);

      // 地图
      let mapData = res.data.saleMap.map((item) => ({
        name: item.areaName,
        value: item.saleNum,
      }));
      echarts.registerMap('china', { geoJSON: chinaJSON } as any);
      let chart = echarts.init(document.getElementById('main1') as HTMLElement);
      chart.setOption({
        tooltip: {
          show: true,
          formatter: '{b0}<br />销量:{c0}',
        },
        visualMap: [
          {
            min: 0,
            max: 1000000,
            calculable: true,
            realtime: true,
            left: 50,
            // 第一个 visualMap 组件
            type: 'continuous', // 定义为连续型 visualMap
          },
        ],
        series: [
          {
            type: 'map',
            map: 'china',
            data: mapData,
            emphasis: {
              label: {
                show: false,
              },
            },
          },
        ],
      });
    }
  });
}
fetchData();
// 设置配置项
function setOptions(data: { name: string; value: string }[]) {
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: 'item',
      showContent: true,
      formatter: '{b0}:{c0}({d0}%)',
    },
    legend: {
      top: '5%',
      right: '50px',
      height: '100px',
      orient: 'vertical',
    },
    series: [
      {
        type: 'pie',
        center: ['30%', '50%'],
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold',
        //   },
        // },
        labelLine: {
          show: true,
          showAbove: true,
        },

        data,
      },
    ],
  });
}
// 单选框和选择器值发生改变
function changeTable() {
  let key = '';
  if (selectKey.value === 'sale_') {
    key = selectKey.value + selectDay.value;
  } else {
    key = selectDay.value + selectKey.value;
  }
  const data = salePie.map((item) => ({
    value: item[key],
    name: item.name,
  }));
  // 绘制图表
  setOptions(data);
}
// 在setup 组件实例下是created，组件挂载需要在mounted里面进行
// onMounted(() => {});
</script>
<style lang="less" scoped>
.homeIndex {
  width: 100%;
  .header {
    width: 100%;
    border-bottom: 1px solid #eee;
    .title {
      padding: 15px 20px;
    }
  }
  #main {
    height: 500px;
    border-bottom: 3px solid #f0f0f0;
  }
  #main1 {
    padding-bottom: 50px;
  }
  .mapTitle {
    text-align: center;
    margin-top: 30px;
  }
  .main_top {
    margin-top: 20px;
    padding: 0 20px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
